<template>
  <view id="login">
		<view class="BG"></view>
	<view class="container">
		<form class="login-form">
			<view class="toptip">注册</view>
			<input type="text" placeholder="用户名" v-model="username" maxlength="20" @input="ValidUsername">
			<view class="tips" v-show="usernameTip">不能包含非法字符,且不能为空</view>
			<view class="tips" v-show="exitUsername">该用户名存在,请重新选择</view>
			<input type="password" placeholder="密码" v-model="password" maxlength="20">
			<view class="tips" v-show="passwordTip">不能为空</view>
			<input type="password" placeholder="确认密码" v-model="againPassword" maxlength="20">
			<view class="tips" v-show="againPasswordTip">两次密码不同</view>
			<button @click.prevent="register">
				<text v-show="registerTip">注册</text>
				<text v-show="registerSuccess">注册成功，点击下方按钮进行登录</text>
				<text v-show="registerError" style="color:red">注册失败</text>
			</button>
			<button @click="goLogin">返回登录</button>
		</form>
		</view>
  </view>
</template>

<script>
// import BG from './bg'
export default {
	components:{
		// BG
	},
	data(){
		return {
			username:"",
			password:"",
			againPassword:"",
			usernameTip:false,
			passwordTip:false,
			againPasswordTip:false,
			registerTip:true,
			CanRegister:false,
			registerSuccess:false,
			registerError:false,
			exitUsername:false
		}
	},
	methods: {
		ValidUsername(){
			if(/\W/g.test(this.username)){
				this.usernameTip=true
			}else{
				this.usernameTip=false
			}
		},
		goLogin(){
			uni.navigateBack()
		},
		register(){
			this.registerTip=false
			if(this.password!==this.againPassword){
				this.againPasswordTip=true
				this.registerLoading=false
				this.registerTip=true
				return
			}else if(this.username===""){
				this.usernameTip=true
				this.registerTip=true
				return 
				}
			else if(this.password===""){
				this.passwordTip=true
				this.registerTip=true
				return 
			}
			else{
				uni.request({
					url:"https://www.ttzxh.icu:443/api/user/register",
					method:"POST",
					data:{
						username:this.username,
						password:this.password,
						realname:this.username
					},
					success: (res) => {
						console.log(res)
						if(res.data.error===-1){
							this.username="",
												this.password="",
												this.againPassword=""
											this.registerSuccess=true
						}else{
							this.username="",
												this.password="",
												this.againPassword=""
							this.exitUsername=true
							this.registerError = true
							setTimeout(()=>{
								this.registerError = false
								this.registerTip = true
							},3000)
						}
					}
				})
				
			}
		}
	},

}
</script>

<style lang="less" scoped>
		.fade{
			opacity: 0;
			animation: leave .5s linear  ;
		}	
		@keyframes leave{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		.tips{
			color: red;
			font-size: 13px;
			line-height: 13px;
		}
	.container{
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		// box-sizing: content-box;	

	}
	.BG {
		width: 100%;
		height: 100vh;
		position: fixed;
		background-image: url(../../static/ada1.jpg);
		background-size: 100% 100%;
		opacity: 0.5;
		z-index: -1;
		top: 0;
		opacity: 0.5;
	}
.toptip{
	font-size: 35px;
}
	.login-form{
		// border-radius: 15px;
		width: 400px;
		height: 300px;
		display: flex;
		flex-direction: column;
		padding:20px 40px 40px 40px;
		text-align: center;
		position: relative;
		z-index: 100;
		overflow: hidden;
	}
	.login-form p{
		color: red;
		font-size: 12px;
		text-align: center;
	}
	.login-form::before{
		content: "";
		// border-radius: 15px;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		box-shadow: inset 0 0 0 200px rgba(255,255,255,0.25);
		position: absolute;
		top: -10px;
		left: 4px;
		z-index: -1;
		filter: blur(6px);
		overflow: hidden;
		}
		.login-form h2{
			font-size: 18px;
			font-weight: 400;
			color: #333;
		}

		.login-form input,.login-form button{
			margin:6px 0;
			height:36px;
			border: none;
			background-color: rgba(255, 255, 255, 0.3);
			border-radius: 4px;
			padding: 0 14px;
			color: #333;
		}
		.login-form input::placeholder{
			color: #3d5245;
		}
		.login-form button{
			margin-top: 8px;
			background-color: rgba(57, 88, 69, .4);
			color:white;
			position: relative;
			overflow: hidden;
			cursor: pointer;
			transition: 0.4s;
		}
		.login-form button:hover{
			background-color: rgba(12, 80, 38, 0.67);

		}

		.login-form button::before,.login-form button::after{
			content:"";
			display: block;
			width: 80px;
			height: 100%;
			background-color: rgba(179, 255, 210,0.5);
			opacity: 0.5;
			position: absolute;
			left:0;
			top: 0;
			transform: skewX(-15deg);
			filter: blur(30px);
			overflow: hidden;
			transform: translateX(-100px);
		}
		.login-form button::after{
			width: 40px;
			background-color: rgba(179, 255, 210, 0.3);
			left:60px;
			filter: blur(5px);
			opacity: 0;
		}
		.login-form button:hover::before{
			transition: 1s;
			transform: translateX(320px);
			opacity: 0.7;
		}
		.login-form button:hover::after{
			transition: 1s;
			transform: translateX(320px);
			opacity: 1;
		}
</style>